<template>
  <div>
    <el-row :gutter="1" class="backg">
      <el-col :xs="24" :sm="8" :md="8" :push="pushgodz">
        <div class="grid-content bg-purple">
          <div class="box2">
            <img src="../assets/LOGO.png" />
            <h2>
              欢迎登录1016开发团队 <br />
              管理平台
            </h2>
          </div>
          <div class="box3">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="账号" prop="account">
                <el-input
                  type="text"
                  v-model="ruleForm.account"
                  autocomplete="off"
                  placeholder="请输入账号"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="ruleForm.password"
                  autocomplete="off"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <h4 class="tishi">账号不存在</h4>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    // 函数
    var account = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var password = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    // 返回值
    return {
      pushgodz: 0,
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        password: [{ validator: password, trigger: "blur" }],
        account: [{ validator: account, trigger: "blur" }],
      },
    };
  },
  // 启动自适应判断
  beforeMount: function () {
    console.log("sha");
    if (document.documentElement.clientWidth > 992) {
      this.pushgodz = 8;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          // 跳转带参数,由于是push,只能用name当路由区域,路由里面设置, 除了push还有其他二种,根据地址等...
      this.$router.push({ name: "Container", params: { name:_this.ruleForm.account } });
      
        } else {
          document.querySelector(".tishi").style.display="block";
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      document.querySelector(".tishi").style.display="none";
    },
  },
};
</script>

<style lang="less" scoped>
.backg {
  position:absolute;
  background: url("../assets/hfuu.png") no-repeat;
  height: 100%;
  background-size: 100% 100%;
  
}
.el-col {
  background: rgba(255, 255, 255, 0.85);
  margin-top: 105px;
  border-radius: 50px;
  box-shadow: 0px 0px 30px rgb(0, 255, 64);
  .bg-purple {
    .box2 {
      padding: 30px 55px 0px;
      img {
        width: 25%;
      }
    }
    @media screen and ( min-width: 970px ) {
      .box3 {
      width: 60%;
      padding: 10px 0px 10px 90px;
    }
    }
    @media screen and ( max-width: 767px ) {
      .box3 {
      width: 85%;
      padding: 0px 0px 0px 0px;
    }
    }
    .tishi {
        width: 50%;
        background: pink;
        color: red;
        margin: -10px 35% 10px;
        display: none;
      }
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
}
</style>
